<template>
    <h1>向客服提问吧！</h1>

    <input type="text" v-model="question">
    <input type="submit" @click="submitQuestion">提交</input>

    {{ message }}



</template>





<script setup>
import axios from 'axios'
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const user_id = String(route.query.user_id)



const question = ref('')

const socket = ref(null)



const message = ref([])


// const submitQuestion = () => {
//     message.value.push(question.value)
//     socket.value.send(JSON.stringify({
//         'msg': question.value,
//         'user_id': user_id,
//         'type':'user'
//     }))

    
// }


const submitQuestion = () => {
    let data = {
        "user_id":user_id,
        "input":question.value,
    }
    axios.post('http://127.0.0.1:8000/webb/get_cpu/',data)
    
}





const initwesockt=()=>{
    const room = "user" + String(user_id)
    socket.value = new WebSocket(`ws://127.0.0.1:8000/webs/${room}/`);

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
        console.log("收到消息",event)
        let msg = JSON.parse(event.data)
        message.value.push('客服回答：'+msg)



        

}

 





        // list1.value.push(JSON.parse(event.data))
    }

    // // 当断开连接时，触发该函数
    // this.socket.onclose =function (event){
    // let tag = document.createElement("div");
    // tag.innerText = "[连接断开]";
    // document.getElementById("message").appendChild(tag);
    // }





onMounted(()=>{
    initwesockt()
})

</script>




<style scoped>



</style>